<template>
  <div class="qr-user">
    <el-button @click="showQr">切换二维码显示</el-button>
    <transition>
      <img class="qr-img" v-if="isShow" :src="qrImg" alt="" ref="qrImg">
    </transition>
  </div>
</template>

<script>
export default {
  name: 'QrUser',
  data() {
    return {
      qrImg: 'https://img1.baidu.com/it/u=11316382,1789085336&fm=253&fmt=auto&app=138&f=JPEG?w=303&h=499',
      isShow: false
    }
  },
  created() {
    console.log('二维码 - created')
  },
  updated() {
    // console.log('组件更新：', this.$refs.qrImg, this.$refs.qrImg.offsetWidth);
  },
  beforeDestroy() {
    console.log('二维码 - beforeDestroy')
  },
  methods: {
    showQr() {
      this.isShow = !this.isShow

      // 期望，当二维码展示出来的时候，输出他的宽高
      // 这里直接获取回报错 console.log('显示：', this.$refs.qrImg, this.$refs.qrImg.offsetWidth);
      this.$nextTick(() => {
        // 该函数会在 data 更新后，并且 DOM 也更新完成后自动触发 
        console.log('显示：', this.$refs.qrImg, this.$refs.qrImg.offsetWidth);
      })
    }
  }
}
</script>

<style>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: skew(60deg);
}

.v-enter-active,
.v-leave-active {
  transition: all 6s;
}
</style>